import React, { ChangeEvent, FC, useState } from "react";
import styles from "./Lavers.module.scss";
import { useDispatch } from "react-redux";
import {
  hiddenComponent,
  lockedComponent,
} from "../../../store/componentsReducer";
import useGetComponentInfo from "../../../hooks/useGetComponentInfo";
import {
  changeSelectId,
  changeComponentTitle,
} from "../../../store/componentsReducer";
import { Input, message, Button } from "antd";
import { EyeInvisibleOutlined, LockOutlined } from "@ant-design/icons";
import classNames from "classnames";
import SortableContainer from "../../../components/DragSortable/SortableContainer";
import SortableItem from "../../../components/DragSortable/SortableItem";
import { moveComponent } from "../../../store/componentsReducer";
const Lavers: FC = () => {
  const dispatch = useDispatch();
  const { componentList, selectId } = useGetComponentInfo();
  const [changeingTitleId, setChangeingTitleId] = useState("");
  const handleTitle = (fe_id: string) => {
    const currenComponent = componentList.find((c) => c.fe_id === fe_id);
    if (currenComponent && currenComponent.isHidden) {
      message.info("不能选中已隐藏的组件");
      return;
    }
    if (fe_id !== selectId) {
      dispatch(changeSelectId(fe_id));
      setChangeingTitleId("");
      return;
    }
    setChangeingTitleId(fe_id);
  };
  //修改标题
  const changeTitle = (event: ChangeEvent<HTMLInputElement>) => {
    const newTitle = event.target.value.trim();
    if (!newTitle) return;
    if (!selectId) return;
    dispatch(changeComponentTitle({ fe_id: selectId, title: newTitle }));
  };
  //切换 隐藏/显示
  const changeHidden = (fe_id: string, isHidden: boolean) => {
    dispatch(hiddenComponent({ fe_id, isHidden }));
  };
  //切换 锁定
  const changeLocked = (fe_id: string, Locked: boolean) => {
    dispatch(lockedComponent({ fe_id }));
  };
  //SortableContainer组件的items需要每个 item 的 id 属性
  const componentListWithId = componentList.map((c) => {
    return { ...c, id: c.fe_id };
  });
  //拖拽结束的行为
  const handleDragEnd = (oldIndex: number, newIndex: number) => {
    dispatch(moveComponent({ oldIndex, newIndex }));
  };
  return (
    <SortableContainer items={componentListWithId} onDragEnd={handleDragEnd}>
      {componentList.map((c) => {
        const { fe_id, title, isHidden, isLocked } = c;
        const titleDefaultClassName = styles.title;
        const selectedClassName = styles.selected;
        const titleClassName = classNames({
          [titleDefaultClassName]: true,
          [selectedClassName]: fe_id === selectId,
        });

        return (
          <SortableItem key={fe_id} id={fe_id}>
            <div className={styles.wrapper}>
              <div
                className={titleClassName}
                onClick={() => handleTitle(fe_id)}
              >
                {fe_id === changeingTitleId && (
                  <Input
                    value={title}
                    onBlur={() => setChangeingTitleId("")}
                    onPressEnter={() => setChangeingTitleId("")}
                    onChange={changeTitle}
                  />
                )}
                {fe_id !== changeingTitleId && title}
              </div>
              <div className={styles.handler}>
                <Button
                  size="small"
                  shape="circle"
                  className={!isHidden ? styles.btn : ""}
                  icon={<EyeInvisibleOutlined />}
                  type={isHidden ? "primary" : "text"}
                  onClick={() => changeHidden(fe_id, !isHidden)}
                />
                <Button
                  size="small"
                  shape="circle"
                  className={!isLocked ? styles.btn : ""}
                  icon={<LockOutlined />}
                  type={isLocked ? "primary" : "text"}
                  onClick={() => changeLocked(fe_id, !isLocked)}
                />
              </div>
            </div>
          </SortableItem>
        );
      })}
    </SortableContainer>
  );
};
export default Lavers;
